<template>
  <div class="editor-setting-area">
    <div class="editor-type-edit">
      <div class="title-info">
        <el-divider content-position="left">区域设置</el-divider>
      </div>

      <div class="item-area">
        <el-form-item label="内容高度">
          <el-input-number
              :min="0"
              size="small"
              class="hide-spin-button"
              v-model="optionsInfo['contentHeight']"
          />
        </el-form-item>
      </div>
    </div>

    <div class="editor-type-edit" v-if="false">
      <div class="title-info">
        <el-divider content-position="left">头部信息设置</el-divider>
      </div>
      <div class="item-area">
        <el-form-item label="字号设置">
          <el-input-number
              v-model="optionsInfo['headerFontSize']"
              :min="12"
              size="small"
              class="hide-spin-button"
          />
        </el-form-item>
        <el-form-item label="字体颜色">
          <el-color-picker
              size="small"
              show-alpha
              :predefine="predefineColors"
              v-model="optionsInfo['headerColor']"/>
        </el-form-item>
        <el-form-item label="粗细设置">
          <el-select v-model="optionsInfo['headerFontWeight']" placeholder="请选择">
            <el-option
                v-for="item in fontWeightOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="背景颜色">
          <el-color-picker
              size="small"
              show-alpha
              :predefine="predefineColors"
              v-model="optionsInfo['headerBackground']"/>
        </el-form-item>
      </div>
    </div>

    <div class="editor-type-edit">
      <div class="title-info">
        <el-divider content-position="left">列表信息设置</el-divider>
      </div>
      <div class="item-area">
        <el-form-item label="字号设置">
          <el-input-number
              v-model="optionsInfo['listFontSize']"
              :min="12"
              size="small"
              class="hide-spin-button"
          />
        </el-form-item>
        <el-form-item label="字体颜色">
          <el-color-picker
              size="small"
              show-alpha
              :predefine="predefineColors"
              v-model="optionsInfo['listColor']"/>
        </el-form-item>
        <el-form-item label="粗细设置">
          <el-select v-model="optionsInfo['listFontWeight']" placeholder="请选择">
            <el-option
                v-for="item in fontWeightOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="展示列数">
          <el-input-number
              :min="3"
              :max="5"
              v-model="optionsInfo['col']"
              class="hide-spin-button"
              size="small"
          />
        </el-form-item>
        <el-form-item label="展示行数">
          <el-input-number
              :min="4"
              :max="7"
              v-model="optionsInfo['row']"
              class="hide-spin-button"
              size="small"
          />
        </el-form-item>

        <template v-if="optionsInfo['switchArea']">
          <el-form-item label="是否切屏">
            <el-switch v-model="optionsInfo['switchScreen']"/>
          </el-form-item>
          <el-form-item label="切屏时间(s)" class="switching-screen">
            <el-input-number
                :min="10"
                :step="1"
                size="small"
                class="hide-spin-button"
                v-model="optionsInfo['switchTime']"
                :disabled="!(optionsInfo['switchScreen'])"
            />
          </el-form-item>
        </template>

        <template v-if="true">
          <el-form-item label="顶部显示字段" v-if="optionsInfo['trendsKey'] || optionsInfo['trendsDept']">
            <el-select v-model="optionsInfo['contentKey']" placeholder="请选择" @change="handleChangeKey">
              <el-option
                  v-for="item in contentKeyOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled"
              />
            </el-select>
          </el-form-item>
        </template>


        <el-form-item label="患者号别">
          <el-select v-model="optionsInfo['patientNumber']" placeholder="请选择">
            <el-option
                v-for="item in patientNumberOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </div>
    </div>
  </div>
</template>

<script>
import constantDic from "@/utils/vue-i18n/lang/zh-CN";
import * as types from "@c/public/form-designer/devType/datas-types";

export default {
  name: "waitingPatientsInfoConfig-editor",

  componentName: "waitingPatientsInfoConfig-editor",

  components: {},

  mixins: [],

  props: {
    designer: Object,
    selectedWidget: Object,
    optionModel: Object,
  },

  inject: ['serverFieldList', 'getDesignerConfig'],

  data() {
    return {
      constantDic: constantDic,
      optionsInfo: Object(),
      predefineColors: types['predefineColors'],
      contentKeyOptions: [
        {
          value: 'deptName',
          label: '科室'
        },
        {
          value: 'registerObjName',
          label: '号别'
        },
        {
          value: 'treatmentRoomName',
          label: '诊室',
          disabled: true
        }
      ],
      fontWeightOptions: types['fontWeightOptions'],
      patientNumberOptions: types['patientNumberOptions'],
    }
  },

  computed: {},

  methods: {
    handleChangeKey(val) {
      let {contentKey, trendsKey, trendsDept} = this.optionsInfo
      if (trendsKey) {
        this.$lodash.filter((this.designer.widgetList), function (item) {
          if (item.type === 'scene-head') {
            let options = item['options'];
            if (!!options && Reflect.has(options, 'config')) {
              let key = options['config'];
              if (contentKey === 'deptName') {
                Reflect.set(item['options'][key], 'content', '科室')
              } else {
                Reflect.set(item['options'][key], 'content', '号别')
              }
            }
          }
        })
      }
    }
  },

  watch: {
    // 组件的所有信息
    optionModel: {
      handler: function (val) {
        let key = val.config;
        this.optionsInfo = val[key];
      },
      deep: true,
      immediate: true
    }
  }

}
</script>

<style lang="scss" scoped>
.editor-setting-area {
  background: transparent;
}
</style>